<template>
    <document>
        <h1>MToast / 提示框</h1>
        
        <h2>Summary</h2>
        <h6>概述</h6>

        <p>提示框是一个类似安卓 Toast 通知的组件</p>
        <p>该组件会根据提示内容的长短，自动设置延迟消失的时间</p>
        <p>请尝试点击下方的按钮查看提示框组件的效果</p>

        <hr />

        <p>The MToast is a component like Android's Toast.</p>
        <p>MToast will delay to disappear, and the delay time's adjustment is depend on the content's length.</p>
        <p>Please try to click the button below the Example.</p>

        <h2>Example</h2>
        <h6>效果演示</h6>
        <m-button type="pirmary" @click.native="showtoast()">
            Open The Toast
        </m-button>

        <h2>Usage</h2>
        <h6>使用方法</h6>

<codeblock>
    new Vue({
        ...
        methods:{
            show_toast:function(){
                var d = new Date();
                this.mirror.toast("Hello World."+d.toLocaleTimeString(),1000,"danger","😁");
            }
        }
    })
</codeblock>

        <h2>Functions</h2>
        <h6>相关函数</h6>

        <function>
            <h1>Vue.mirror.toast(content,delaytime,color,badge)</h1>
            <p>显示Toast通知</p>
            <p>Show the Toast</p>
            <table>
                <tr>
                    <td>
                        content
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        Toast's content<br>
                        提示的内容
                    </td>
                </tr>
                <tr>
                    <td>
                        delaytime
                    </td>
                    <td>
                        Number
                    </td>
                    <td>
                        Delay time to disappear the Toast<br>
                        延迟消失的时间
                    </td>
                </tr>
                <tr>
                    <td>
                        color
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        The color of Toast(only main, sub and danger)<br>
                        提示框的颜色（只能输入main，sub和danger）
                    </td>
                </tr>
                <tr>
                    <td>
                        badge
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        An icon that will show on the left<br>
                        通知左侧的小图标
                    </td>
                </tr>
            </table>
        </function>
    </document>
</template>

<script>
    export default {
        methods:{
            showtoast:function(){
                var d = new Date();
                this.mirror.toast("Hello World."+d.toLocaleTimeString(),1000,"danger","😁");
            }
        }
    }
</script>